<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>查看及编辑政策分类</title>
        <script src="/lib/axios.js"></script>
        <script src="/lib/vue.js"></script>
        <link rel="stylesheet" href="/lib/elementindex.css">
        <script src="/lib/elementindex.js"></script>
    </head>

    <body>
        <div id="app" style="width:100%">
            <el-card>
                <div slot="header">
                    <span>{{component.rname}}</span>
                    <el-button style="float: right; padding: 3px 0" type="text" @click="handleBasicSettingDlg()">基本信息
                    </el-button>
                </div>
                <div style="font-size: 0.875rem;margin-bottom: 1.125rem;">
                    <span>{{component.description}}</span>
                </div>
            </el-card></br>
            <el-form ref="form" label-width="auto">
                <el-table :data="ruleDef.list" style="width: 100%;margin-bottom: 20px;" row-key="id" border
                    :default-sort="{prop: 'level', order: 'ascending'}">
                    <el-table-column label="#" prop='id' width="40px">
                    </el-table-column>
                    <el-table-column label="分类代码">
                        <template slot-scope="scope">
                            <el-input v-model.trim="scope.row.code" placeholder="分类代码" onkeyup="value=$util.tokentrim(value)"
                                onbeforepaste="clipboardData.setData('text',$util.tokentrim(clipboardData.getData('text')))"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="名称/说明">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.name" type="textarea" :autosize="{ minRows: 1, maxRows: 1}"
                                placeholder="名称/说明"></el-input>
                        </template>
                    </el-table-column>

                    <el-table-column label="优先级" width="100px" sortable prop="level">
                        <template slot-scope="scope">
                            <el-input v-model.number="scope.row.level" type='number' placeholder="数字小优先级高"></el-input>
                        </template>
                    </el-table-column>

                    <el-table-column label="操作">
                        <template slot="header">
                            <span>操作</span>
                            <el-button type="success" size='mini' @click="triggerAppendRowEvent">添加分类</el-button>
                        </template>
                        <template slot-scope="scope">
                            <el-tooltip content="删除当前行" placement="top-start">
                                <el-button plain size='mini' @click="triggerDeleteRowEvent(scope.$index)">X</el-button>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                </el-table>

                <el-form-item label="">
                    <el-button type="primary" @click='triggerSaveEvent'>保存修改</el-button>
                </el-form-item>
            </el-form>
        </div>

        <script type='module'>
            import * as $util from '/lib/hc-util.js'
            window.$util = $util; //for html document event
            import * as $rest from '/lib/hc-rest-service.js'
            import RuleBasicSetting from '/com/hc-rule-basic-properties.js'
            
            $rest.check$pinfoOrLoad(onready, 'xsxdjc/Main');

            function onready() {
                $rest.obtainRuleDefByRpath($pinfo.pcode() + '/PolicyCategory', function(ruleDef) {
                    window.vmsetting = new RuleBasicSetting();
                    window.vm = new Vue({
                        el: '#app',
                        data: {
                            ruleDef: ruleDef,
                            component: $config.componentMap['data:policy:category'],
                        },
                        methods: {
                            handleBasicSettingDlg:function()
                            {
                                vmsetting.show(this.ruleDef)
                            },
                            triggerInsertRowEvent: onInsertRowEvent,
                            triggerDeleteRowEvent: onDeleteRowEvent,
                            triggerAppendRowEvent: onAppendRowEvent,
                            triggerSaveEvent: function() {
                                $rest.updateRuleDefInVm(this)
                            },
                        }
                    });
                })
            };


            function onAppendRowEvent() {
                onInsertRowEvent(vm.$data.ruleDef.list.length)
            }

            function onInsertRowEvent(index) {

                ++vm.ruleDef.rmaxid;

                let row = {
                    id: vm.ruleDef.rmaxid,
                    level: vm.ruleDef.rmaxid,
                    code: '',
                    name: '',
                }
                vm.$data.ruleDef.list.splice(index, 0, row);
            }

            function onDeleteRowEvent(index) {
                vm.$data.ruleDef.list.splice(index, 1);
            }
        </script>

    </body>

</html>
